<template>
  <div class="todo-input">
    <el-input
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="请输入新的待办事项..."
      class="input-field"
    />
    <el-button @click="addTodo" type="primary" class="add-button">添加任务</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// import { defineEmits } from 'vue';

const newTodo = ref('');

const emit = defineEmits(['add-todo']);

function addTodo() {
  if (newTodo.value.trim() !== '') {
    emit('add-todo', newTodo.value.trim());
    newTodo.value = '';
  }
}
</script>

<style scoped>
.todo-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.input-field {
  flex-grow: 1;
  margin-right: 10px;
}
.add-button {
  padding: 12px 20px;
}
</style>